<template>
  <h2>{{person}}</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <!-- toRef(person.job.j1,'salary')的用法 -->
  <!-- <h2>薪资：{{salary}}K</h2> -->
  <!-- toRefs(person)的用法 -->
  <h2>薪资：{{job.j1.salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <!-- toRef(person.job.j1,'salary')的用法 -->
  <!-- <button @click="salary++">涨薪</button> -->
  <!-- toRefs(person)的用法 -->
  <button @click="job.j1.salary++">涨薪</button>
</template>
  
<script>
  import {reactive,toRef,toRefs} from 'vue'
  export default {
    name: 'Demo',
    setup(props,context){
      // 数据
      let person = reactive({
        name: '张三',
        age: 18,
        job: {
          j1: {
            salary: 20
          }
        }
      })

      // const name1 = person.name
      // console.log('%%%',name1)

      // const name2 = toRef(person,'name')
      // console.log('###',name2)

      // 这里只能将person下的第一层key拆出来
      // const x = toRefs(person)
      // console.log('***',x)


      // 返回一个对象（常用）
      return {
        person,
        // name: toRef(person,'name'),
        // age: toRef(person,'age'),
        // salary: toRef(person.job.j1,'salary')
        ...toRefs(person) // 这里只能将person下的第一层key拆出来
      }
  
    }
  
  }
  </script>
  
  
  